<template>
	<view>
		<navbar title='忘记密码' :isBack="true"></navbar>
		<u-toast ref="uToast" />
		<view class="form">
			<view class="account">
				<input type="text" placeholder="输入邮箱" v-model="form.user">
			</view>
			<view class="verify-code">
				<input type="text" placeholder="输入验证码" v-model="form.verifyCode">
				<view class="send-btn" @click="sendVerifyCode">发送验证码</view>
			</view>
			<view class="pass-repass">
				<view><input type="password" placeholder="你的密码" v-model="form.password"></view>
				<view><input type="password" placeholder="重复密码" v-model="form.rePassword"></view>
			</view>
			<view class="btn" @click="confirm">完成</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				form: {
					user: "",
					verifyCode: "",
					password: "",
					rePassword: "",
				},


				confirmDisabled: true
			}
		},
		watch: {
			// re_password(val) {
			// 	if (this.password != "" && val != this.password) {
			// 		this.$refs.uToast.show({
			// 			title: '两次密码不一致',
			// 			type: 'error',
			// 			position: "top"
			// 		})
			// 		this.confirmDisabled = true
			// 	}
			// 	if (val == this.password) {
			// 		this.$refs.uToast.show({
			// 			title: '密码一致',
			// 			type: 'success',
			// 			position: "top"
			// 		})
			// 		this.confirmDisabled = false
			// 	}
			// }

		},
		methods: {
			sendVerifyCode() {
				let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if (reg.test(this.form.user)) {
					this.$api.verifyCode_forget(`?mail=${this.form.user}`).then(res => {
						console.log(res)
						if (res.data.code == 1) {
							this.$refs.uToast.show({
								title: '验证码已发送，请注意查收',
								type: 'success',
								position: "top"
							})
						} else {
							this.$refs.uToast.show({
								title: res.data.msg,
								type: 'error',
								position: "top"
							})
						}
					})
				} else {
					this.$refs.uToast.show({
						title: '邮箱格式不正确',
						type: 'error',
						position: "top"
					})
				}
			},
			check() {
				console.log(this.form)
				let required = {
					user: "邮箱",
					verifyCode: "验证码",
					password: "密码",
					rePassword: "重复你的密码",
				}
				for (let key in this.form) {
					if (!this.form[key] && key != 'rePassword') {
						this.$refs.uToast.show({
							title: `请填写${required[key]}`,
							type: 'error',
							position: "top"
						})
						return true
					} else if (key == 'rePassword' && !this.form[key]) {
						this.$refs.uToast.show({
							title: required[key],
							type: 'error',
							position: "top"
						})
						return true
					}
				}

				if (this.form.password.trim() != this.form.rePassword.trim()) {
					this.$refs.uToast.show({
						title: '两次密码不一致，请检查',
						type: 'error',
						position: "top"
					})
					return true
				}
			},
			//点击确定
			confirm() {
				if (this.check()) {
					return
				}
				this.$api.forget_pass(this.form).then(res => {
					if (res.data.code == 1) {
						this.$refs.uToast.show({
							title: res.data.msg + '，为你跳转登录页',
							position: "top",
							type: 'success',
							url: `pages/selectPage/selectPage?f=1&user=${this.form.user}`
						})
					} else {
						this.$refs.uToast.show({
							title: res.data.msg,
							position: "top",
							type: 'error'
						})
					}

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.form {
		margin: 30rpx;

		// view {
		// 	// border: 1px solid;
		// }

		.verify-code {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// border: 1px solid;

			.send-btn {
				text-align: center;
				padding: 24rpx 50rpx;
				border: 1px solid rgba(126, 181, 109, .6);
				font-size: 30rpx;
				border-radius: 50rpx;
				background-image: linear-gradient(to right, #59cf5d 0%, #f9f96d 100%);
				color: #fff;
			}
		}

		input {
			text-align: center;
			padding: 24rpx;
			border: 1px solid rgba(126, 181, 109, .6);
			font-size: 32rpx;
			outline: none;
			margin: 40rpx 0;
			border-radius: 50rpx;
		}
	}

	.btn {
		border: 1px solid;
		text-align: center;
		padding: 24rpx;
		overflow: hidden;
		font-size: 32rpx;
		color: #FFFFFF;
		border: 1px solid rgba(126, 181, 109, .6);
		background-image: linear-gradient(to right, #59cf5d 0%, #f9f96d 100%);
		border-radius: 50rpx;
		transition: all .25s linear;

	}
</style>
